<style lang="less" scoped src="./member.less"></style>
<script src="./member.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="15">
            姓名：<Input v-model="query.realname" clearable style="width: 20%"></Input>
            电话：<Input v-model="query.phone" clearable style="width: 20%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
            <Col span="9">
                <row>
                    <Col span="6">
                    <a :href="downloadUrl"><Button type="primary" icon="">下载导入模板</Button></a>
                    </Col>
                    <Col span="6">
                    <Upload
                            :action="SERVER_HOST + 'busine/theme/member/memberImport/?orgId=' + baseuser.orgId + '&themeId=' + theme"
                            :show-upload-list="false"
                            :on-success="uploadSuccess">
                        <Button type="primary" icon="ios-cloud-upload">导入会员</Button></Upload>
                    </Col>
                    <Col span="6">
                    <span @click="addMember"><Button type="primary" icon="ios-add">新增会员</Button></span>
                    </Col>
                    <Col span="6">
                    <span @click="deleteByIds"><Button type="error" icon="ios-remove">批量删除</Button></span>
                    </Col>
                </row>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data" height="400" size="small" @on-selection-change="getSelect"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal v-model="editModal"
               :title="(formData.id ? '修改': '新增') + '会员'"
               width="40%"
               :mask-closable="false"
               @on-cancel="editModal = false"
               :styles="{top: '20px'}"
               :transfer="false">
            <Form ref="formData" :model="formData" :label-width="100" :rules="ruleInline">
                <FormItem label="会员名称" prop="realname">
                    <Input v-model="formData.realname" clearable></Input>
                </FormItem>
                <FormItem label="联系电话" prop="phone">
                    <Input v-model="formData.phone" clearable></Input>
                </FormItem>
                <FormItem label="性别">
                    <Select v-model="formData.sex" clearable style="width: 100%">
                        <Option :value=1>男</Option>
                        <Option :value=2>女</Option>
                    </Select>
                </FormItem>
                <FormItem label="年龄">
                    <InputNumber v-model="formData.age"
                                 :min="0"
                                 :precision="0"
                                 style="width: 100%"
                    ></InputNumber>
                </FormItem>
                <FormItem label="学校/所在单位" prop="school">
                    <Input v-model="formData.school" clearable></Input>
                </FormItem>
                <FormItem label="奖项" prop="diplomasId">
                    <Select v-model="formData.diplomasId" clearable>
                        <Option v-for="item in dipList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="备用1">
                    <Input v-model="formData.spare1" clearable></Input>
                </FormItem>
                <FormItem label="备用2">
                    <Input v-model="formData.spare2" clearable></Input>
                </FormItem>
                <FormItem label="备用3">
                    <Input v-model="formData.spare3" clearable></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="saveMember('formData')">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="closeModel('formData')">取消</Button>
            </div>
        </Modal>
    </div>
</template>
